<!DOCTYPE html>
<html lang="zh_CN" class="h100">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" />
    <meta name="renderder" content="webkit" />
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
    <title>安徽省社会消费品零售总额预测系统</title>
    <link rel="shortcut icon" href="../../public/images/pm.ico" />
    <link rel="bookmark" href="../../public/images/pm.ico" type="image/x-icon" 　 />
    <link rel="stylesheet" type="text/css" href="../../public/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="../../public/css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="../../public/css/base.css" />
    <link rel="stylesheet" type="text/css" href="../../public/css/layout.css" />
    <link rel="stylesheet" type="text/css" href="../../public/js/layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="../../public/css/main.css" />
    <style>
        .data {
            position: absolute;
            top: 0px;
            text-align: center;
            width: 100%;
        }
    </style>
</head>

<body class="h100">
    <div class="container-fluid">
        <div class="row entry-row">
            <div>
                <div class="data-entry-title">
                    <p><i class="month-ico"></i><span>社零增幅预测-季度预测</span></p>
                </div>
                <div class="forecast-box">
                    <div class="select" style="display: none">
                        <select class="form-control" id="month-select">
              <option>2018年</option>
              <option>2019年</option>
            </select>
                    </div>
                    <div id="main" style="width: 100%;height:400px;"></div>
                    <div class="data">
                        <span class="true-data" style="margin-right:100px;"></span>
                        <span class="forecast-data"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../../public/js/echarts.js"></script>
    <script type="text/javascript" src="../../public/js/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="../../public/js/layui/layui.js"></script>
    <script type="text/javascript">
        $(function() {
            layui.use('layer', function() {
                var layer = layui.layer;
                layer.ready(function() {
                    layer.load(2);
                });
            });
            var indexData = localStorage.getItem('quarterlyValue')
            $.ajax({
                type: "GET",
                url: "http://ansocialsale.frpgz1.idcfengye.com/predictseason",
                // dataType: 'jsonp', 
                contentType: "application/json",
                data: {
                    index: indexData
                },
                dataType: "json",
                success: function(res) {
                    setTimeout(() => {
                        layer.closeAll("loading");
                        var xAxisData = res.xAxis.data;
                        var trueData = res.ytrue[0].data;
                        var forecast = res.ypredict[0].data;
                        // $('.true-data').html('实际值：'+res.ytrue[0].data[(res.ytrue[0].data.length)-1])
                        $('.forecast-data').html('预测值：' + res.ypredict[0].data[(res.ypredict[0].data.length) - 1])
                        var option = {
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                orient: 'vertical',
                                right: '0',
                                top: "18px",
                                data: ['实际数据', '预测数据']
                            },
                            xAxis: [{
                                type: 'category',
                                data: xAxisData
                            }],
                            yAxis: [{
                                type: 'value',
                                name: '单位/%',
                                min: 0,
                                axisLabel: {
                                    formatter: '{value} '
                                }
                            }],
                            series: [

                                {
                                    name: '实际数据',
                                    type: 'line',
                                    smooth: false,

                                    itemStyle: { /*设置折线颜色*/
                                        normal: {
                                            /* color:'#c4cddc'*/
                                        }
                                    },
                                    data: trueData
                                }, {
                                    name: '预测数据',
                                    type: 'line',
                                    color: ['#37ad99'],
                                    itemStyle: {
                                        normal: {
                                            lineStyle: {
                                                width: 2,
                                                color: '#37ad99',
                                                type: 'dotted' //'dotted'虚线 'solid'实线
                                            },
                                        }
                                    },
                                    data: forecast
                                }
                            ]
                        };
                        // 基于准备好的dom，初始化echarts实例
                        var myChart = echarts.init(document.getElementById('main'));
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    }, 3000)
                }
            })
        })
    </script>
</body>

</html>